<template>
    <div class="component-content-header">

        <!-- breadcrumb start -->
        <a-breadcrumb class="breadcrumb" style="background-color: red;">
            <a-breadcrumb-item>
                <span class="link">首页</span>
            </a-breadcrumb-item>
            <a-breadcrumb-item v-for="(item,index) in list_breadcrumb" :key="index">
                <span :class="{
                    'link' : item.path
                }">{{ item.name }}</span>
            </a-breadcrumb-item>
        </a-breadcrumb>
        <!-- breadcrumb end -->

        <div class="title" v-if="title">
            {{ title }}
        </div>

        <div class="explain">
            {{ explain }}
        </div>

        <slot name="content"></slot>

    </div>
</template>

<script>
export default {
    props:{
        // 面包屑
        breadcrumb:{
            type : Array,
            default : ()=>{
                return []
            }
        },
        // 标题
        title:{
            type : String,
            default : ""
        },
        explain:{
            type : String,
            default : ""
        }
    },
    watch:{
        breadcrumb:(val,old)=>{
            this.list_breadcrumb = val||[];
        }
    },
    data(){
        return {
            "list_breadcrumb":[]
        }
    },
    mounted(){
        this.list_breadcrumb = this.breadcrumb||[];
        if( this.breadcrumb.length<=0 ){
            var path = this.$router.history.current.path;
            this.buildBreadcrumb(path);
        }
    },
    methods:{
        // 构建列表
        buildBreadcrumb(path){
            // 逆向路径构建
            var list_menus = this.$bus.list_menus;
            var collect = this.formartBreadcrumb(list_menus)||{};
            if( collect[path] ){
                this.list_breadcrumb = collect[path];
            }
        },
        formartBreadcrumb(obj=[], collect={},path=[]){
            for(var k in obj){
                var sec_path = path.slice(0);
                var d = obj[k];
                sec_path.push({
                    'path':d.href,
                    'name':d.name,
                });
                collect[d.href||'/'] = sec_path;
                if( d['children'] ){
                    collect = this.formartBreadcrumb(d['children'],collect,sec_path);
                }
            }
            return collect;
        },
    }
}
</script>

<style lang="less" scoped>
@import "./content_header";
</style>